import React from 'react';

import {
  View,
  Text,
  TouchableOpacity,
} from 'react-native';

import Config from '../../config';
import BasePage from '../common/BasePage';
import TRefreshComponent from '../../components/TRefreshComponent';
import BaseItem from '../common/BaseItem';
import SizeUtils from '../../common/SizeUtils';
import ImageConstants from '../../common/ImageConstants';
import TImage from '../../components/TImage';

//心理测评

export default class HeartTestMainPage extends BasePage {
  constructor(props) {
    super(props);
    this.state.isResponeUpdate = false;
    this.state.isRefreshing = false;
    this._pullRefresh = null;
  }

  componentWillUpdate(nextProps, nextState) {
    if(nextState.isResponeUpdate) {
      console.log("shouldComponentUpdate ResponeUpdate", this.state.data);
      nextState.isResponeUpdate = false;
      this.setState({
        isRefreshing: false,
      })
      this._pullRefresh.finish(1, nextState.data);
    }
  }

  render() {
    return(
      <View style={{paddingTop:Config.paddingTop, backgroundColor:"#ffffff"}}>
        <TRefreshComponent style={{paddingTop:SizeUtils.translateDesignHeightToCode(35),
          left:SizeUtils.translateDesignWidthToCode(40),
          width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(80),
          height:SizeUtils.getWindowSize().height - Config.paddingTop - SizeUtils.translateDesignHeightToCode(30),
          backgroundColor:"#ffffff00",
            }}
          ref={(ref)=> {
            this._pullRefresh = ref;
          }}
          onRefresh = {this._onRefresh.bind(this)}
          onPressItem = {this._onPressItem.bind(this)}
          onRenderItem = {this._onRenderItem.bind(this)}
        />
        {this._renderNavigationBar()}
      </View>
    )
  }

  _onRefresh(page) {
    if(this.state.isRefreshing == false) {
      this.setState({
        isRefreshing:true,
      })
      // this._requestData(page);
      this._requestDataTest();
    }
  }

  _requestDataTest() {
    this.initTimer = setTimeout(
      () => {
        let dataArr = [];
        for (var i = 0; i < 20; i++) {
          dataArr.push({name:"标题" + i, type:"类型:" + i});
        }
        this._pullRefresh.finish(1, dataArr);
      },
      500
    );
  }

  _requestData() {

  }

  _onPressItem(data) {

  }

  _onRenderItem(data, index) {
    return <Item data = {data} key ={index}/>
  }
}

class Item extends BaseItem {
  render() {
    return(
      <View style={{flex:1, flexDirection: "column",
          paddingTop: SizeUtils.translateDesignNumToCode(20),
          paddingBottom :SizeUtils.translateDesignHeightToCode(10),
          borderBottomWidth:SizeUtils.translateDesignNumToCode(3), borderBottomColor:"#eeeeee", }}>
        {this._renderShowImage()}
        {this._renderBottomText()}
      </View>
    )
  }

  _renderShowImage() {
    return (
      <View style={{flex:1, flexDirection:"row", justifyContent:"center"}}>
        <TImage source={ImageConstants.common_default_head} style={{width:480, height:180}}/>
      </View>
    );
  }

  _renderBottomText() {
    return (
      <View style={{flex:1, flexDirection: "row", justifyContent:"space-between", paddingTop:SizeUtils.translateDesignHeightToCode(30)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          {this.props.data.name}
        </Text>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          {this.props.data.type}
        </Text>
      </View>
    )
  }
}
